<template>
  <div>
    <!-- 轮播图 -->
    <n-carousel autoplay>
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
      />
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
      />
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
      />
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
      />
    </n-carousel>

    <!-- 输入框 -->
    <n-space vertical>
      <n-input
        status="warning"
        placeholder="请输入名称"
        v-model:value="LoginFrom.userName"
      />
      <n-input
        type="password"
        show-password-on="mousedown"
        placeholder="密码"
        :maxlength="8"
        v-model:value="LoginFrom.password"
      />
      <n-button type="primary" @click="login(LoginFrom)"> 登录 </n-button>
      <n-button type="success" @click="register()"> 注册 </n-button>
    </n-space>
  </div>
</template>

<script>
import { defineComponent } from "vue";

// 引入axios
import { getRequest, postRequest, postRequestLogin } from "../http/request";
import {
  NCarousel,
  NSpace,
  NButton,
  NInput,
  createDiscreteApi,
} from "naive-ui";

export default defineComponent({
  setup() {
    const message = createDiscreteApi(["message"]).message;
    return {
      // 登录
      login(LoginFrom) {
        // 使用get请求
        postRequestLogin(LoginFrom, `/sysUser/login`).then((res) => {
          if (res.data.code == 200) {
            message.success(res.data.message);
            localStorage.setItem("token", res.data.data.token, 1000 * 60 * 60);
            this.$router.push("/home");
          }
          if (res.data.code == 500) {
            message.error(res.data.message);
          }
          if (res.data.code == 403){
            localStorage.clear();
          }
        });
      },
      // 注册
      register() {
        this.$router.push("/register");
      },
    };
  },
  components: {
    NCarousel,
    NSpace,
    NButton,
    NInput,
  },
  data() {
    return {
      // 登录对象
      LoginFrom: {
        // 名称
        userName: "888",
        // 密码
        password: "123456",
      },
    };
  },
});
</script>
  
<style scoped>
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
</style>